<template>
 <div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calculator()">
    <input type="text" v-model="result">
</div>
</template>



<script>
export default {
  data() {
    return {
        n1: 0,
            n2: 0,
            opt: '+',
            result: 0

    }
  },
  methods:{
      calculator() {
                switch (this.opt) {
                    case '+':
                        this.result = Number(this.n1) + Number(this.n2);
                        break;
                    case '-':
                        this.result = Number(this.n1) - Number(this.n2);
                        break;
                    case '*':
                        this.result = Number(this.n1) * Number(this.n2);
                        break;
                    case '/':
                        this.result = Number(this.n1) / Number(this.n2);
                        break;
                }
             },
        }
}
</script>

<style scoped>

</style>
